import React, { useState, useEffect } from 'react'
import { Search, Toast, Grid } from 'react-vant';
import { Swiper, Image } from 'react-vant';

import { ShopO ,FriendsO} from '@react-vant/icons';
import { Tabs } from 'react-vant';
import { Button } from 'react-vant';
import { GETLIST, ALLSIST, STATELISTTYPE } from '../../../types/store.d'
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
//axios 
import axios from '../../../ulist/index'
//mock
import '../../../api/index'



export const images = [
    
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
    'https://img.yzcdn.cn/vant/apple-5.jpg',
    'https://img.yzcdn.cn/vant/apple-6.jpg',
    'https://img.yzcdn.cn/vant/apple-7.jpg',
    'https://img.yzcdn.cn/vant/apple-8.jpg',
  ];


export default function Index() {
    const dispatch = useDispatch()
    const navigate = useNavigate()


    const [value, setValue] = useState('');

    useEffect(() => {
        axios.get('/api/list').then(res => {
            console.log(res.data.list);
            dispatch({
                type: GETLIST,
                payload: res.data.list
            })
            console.log(1111);

        })
    }, [])

    useEffect(()=>{
        
    },[])

    const getlistto = useSelector((state: ALLSIST) => {
        return state.list
    })
    console.log(getlistto);

    const handlClick = (params: STATELISTTYPE) => {
        console.log(111, '123');
        navigate('/home/toplist', {
            state: params
        })
    }

    const chalist = useSelector((state:ALLSIST)=>{
        return state.childrenList
    })
    console.log(chalist);
    
  
    

    return (
        <div>
            
            {/* <Search
                label="4399"
                // shape="round"
                background="#4fc08d"
                value={value}
                onChange={setValue}
                placeholder="请输入搜索关键词"
            /> */}
            <div className="inoyt">
              
                    <p><b>4399 在线玩</b></p>
                
                <input type="text" className='input' placeholder='玩游戏' />
                <span className='wpo'><FriendsO  /></span>
            </div>

            <div className="demo-tabs">
    <Tabs active={0}>
      {[1, 2, 3].map((item) => (
        <Tabs.TabPane key={item} title={`标签${item}`}>
          内容 {item}
        </Tabs.TabPane>
      ))}
    </Tabs>
    </div>

            <div className="demo-swiper">
            <Swiper>
        {images.map((image) => (
          <Swiper.Item key={image}>
            <Image lazyload src={image} />
          </Swiper.Item>
        ))}
      </Swiper>
            </div>

            <Grid columnNum={5}>
                {
                    getlistto.map((item, index) => {
                        return <Grid.Item key={index} icon={<ShopO />} text={item.user} />
                    })
                }

            </Grid>

            <ul>
                {
                    getlistto.map((item, index) => {
                        return <li key={index} onClick={() => handlClick(item)}>
                            <img src={item.img} alt="" />
                                    
                                <p className='uo'>{item.user}<br/>
                                    {item.title}</p>
                            
                            
                            <button className='kais' onClick={() => handlClick(item)} >开始玩</button>
                        </li>
                    })

                    
                }
                 
            </ul>
            


        </div>
    )
}
